<script setup lang="ts">
import { invoke } from '@tauri-apps/api/core';
import { nextTick, reactive, ref } from 'vue';

interface Props {
  categoryList: any[];
}
interface Emits {
  (e: 'refreshList'): void;
}

const props = defineProps<Props>();
const emits = defineEmits<Emits>();
const formRef = ref();
const state = reactive({
  visible: false,
  loading: false,
  ruleForm: {
    id: null,
    title: '',
    categoryId: null as number,
    categoryName: '',
    code: '',
    sort: null as number
  },
  rules: {
    title: [
      {required: true, message: '请输入标题', trigger: 'blur'},
    ],
    categoryId: [
      {required: true, type: 'number', message: '请选择分类', trigger: 'change'},
    ],
    code: [
      {required: true, message: '请输入代码', trigger: 'blur'},
    ],
    sort: [
      {required: true, type: 'number', message: '请输入排序', trigger: 'blur'},
    ]
  },
});
const openDialog = (data) => {
  state.visible = true;
  state.loading = false;
  nextTick(() => {
    formRef.value.restoreValidation();
    state.ruleForm.id = null;
    state.ruleForm.title = '';
    state.ruleForm.categoryId = null;
    state.ruleForm.categoryName = '';
    state.ruleForm.code = '';
    state.ruleForm.sort = null;
    if (data) {
      state.ruleForm.id = data.id;
      state.ruleForm.title = data.title;
      state.ruleForm.categoryId = data.category_id;
      state.ruleForm.code = data.code;
      state.ruleForm.sort = data.sort;
    }
  });
};
const clickCancel = () => {
  state.visible = false;
};
const clickConfirm = () => {
  formRef.value.validate((err: []) => {
    if (!err) {
      state.loading = true;
      const categoryName = props.categoryList.find(item => item.id === state.ruleForm.categoryId)?.name;
      invoke(state.ruleForm.id ? 'update_code_info' : 'create_code_info', {
        ...state.ruleForm,
        categoryName,
        gmtCreate: new Date().getTime(),
        gmtModified: new Date().getTime()
      }).then(() => {
        state.loading = false;
        state.visible = false;
        emits('refreshList');
      });
    }
  });
};
defineExpose({
  openDialog
});
</script>

<template>
  <n-modal v-model:show="state.visible"
           :show-icon="false" :close-on-esc="false"
           :mask-closable="false"
           style="width: 75%"
           preset="dialog" :title="state.ruleForm.id ? '编辑' : '添加'">
    <div class="content-wrapper">
      <n-form ref="formRef" :model="state.ruleForm" :rules="state.rules" label-placement="left" label-width="100"
              require-mark-placement="left">
        <n-grid responsive="screen" item-responsive>
          <n-form-item-gi span="24" label="标题" path="title">
            <n-input v-model:value="state.ruleForm.title" placeholder="请输入标题"></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="分类" path="categoryId">
            <n-select v-model:value="state.ruleForm.categoryId"
                      placeholder="请选择分类" label-field="name" value-field="id" :options="categoryList" filterable></n-select>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="排序" path="sort">
            <n-input-number class="w100%" v-model:value="state.ruleForm.sort" placeholder="请输入排序"></n-input-number>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="代码" path="code">
            <div class="w100% h-400px">
              <v-md-editor v-model="state.ruleForm.code" height="400px"></v-md-editor>
            </div>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
    <template #action>
      <n-space>
        <n-button @click="clickCancel">取消</n-button>
        <n-button type="primary" @click="clickConfirm" :loading="state.loading">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<style scoped lang="scss">
</style>
